<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">后台管理系统</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
        <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="username">
              <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
        <p class="login-tips">Tips : 用户名和密码随便填。</p>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class Login extends Vue {

  public ruleForm: any = {
    username: 'admin',
    password: '123123',
  };

  public rules: any = {
    username: [
      {
        required: true,
        message: '请输入用户名',
        trigger: 'blur',
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
      },
    ],
  };

  private checkLogin() {
    let res: boolean = true;
    if (!this.ruleForm.username || !this.ruleForm.password) {
      res = true;
    }
    return res;
  }

  private submitForm() {
    if (this.checkLogin()) {
      localStorage.setItem('ms_username', this.ruleForm.username);
      this.$router.push('/');
    }
  }
}
</script>
